<template>
  <div class="tree-box">
    <div v-for="(item, index) of list" :key="index" class="item border-top">
      {{item.title}}
      <div v-if="item.children">
        <tree-list :list="item.children"></tree-list>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name:'TreeList',
  props:{
    list:{
      type: Array,
      default:function(){
        return [
          {title:'1级',children:[
            {title:'1.1级'},
            {title:'1.2级'},
            {title:'1.3级'}
          ]},
          {title:'2级',children:[
            {title:'2.1级',children:[
              {title:'2.1.1级'},
              {title:'2.1.2级'},
              {title:'2.1.3级'},
            ]},
            {title:'2.2级'},
            {title:'2.3级'}
          ]}
        ]
      }
    }
  },
  data(){
    return {
      
    }
  }
}
</script>

<style lang="scss" scoped>
.tree-box{
  margin:20px auto;
}
.item{
  padding:10px;
}
</style>
